<template>
  <div>
    <van-card 
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    :style="styles" class="cards">
      <template #tags>
        <van-tag plain type="danger">标签</van-tag>
        <van-tag plain type="danger">标签</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template>
    </van-card>
  </div>
</template>

<script>
import Vue from "vue";
import { Card,Button,Tag } from "vant";

Vue.use(Card);
Vue.use(Button);
Vue.use(Tag);


export default {
 data() {
     return {
            styles:{
        width:0
    }
     }
 },
    computed: {
        setStyle(){
            this.styles.width = (window.innerWidth-40)+'px'
        }
    },
    mounted() {
        this.setStyle
    },
    updated() {
        this.setStyle
    },
};
</script>

<style lang="scss" scoped>
.cards{
    margin-bottom: 3px;
    border-radius: 15px;
}
</style>